<template>
	<view class="zh-u-checkbox display-flex align-center" @click.stop="handleClick">
		<checkbox-group @change="handleChange">
			<checkbox
				:value="props.value" 
				:checked="props.checked" 
				:disabled="props.disabled" 
				:color="props.color"
				class="checkbox"
				:style="`transform:scale(${sizePercent})`"
			></checkbox>
		</checkbox-group>
		<text v-if="props.name" :style="textStyle">{{ props.name }}</text>
	</view>
	
</template>

<script setup lang="ts">
	const props = defineProps<{
		name?: string
		sizePercent?: number
		value?: string
		disabled?: boolean
		checked?: boolean
		color?: string
		fontSize?: string
	}>()
	const textStyle = {
		fontSize:uni.upx2px(Number(props.fontSize)) + 'px'
	}
	const emit = defineEmits(['change', 'click'])
	const handleChange = (e: any) => {
		emit('change', e.detail.value)
	}
	
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
.zh-u-checkbox {
	//background-color: #fff;
	.active {
		background-color: $uni-color-primary;
	}
}
</style>
